<template>
  <div>
    <div class="box">
      <div class="top">
        <h3>我的</h3>
        <div>
         <van-icon name="service-o" class="ear" @click="ico"/>
          <van-icon name="setting-o"  @click="sat"/>
        </div>
      </div>
      <div class="bottom">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F14%2F20210614060633_74f83.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667831764&t=da32c0a7a1162d84ccdc2a63e57fc5ff" alt="">
        <div class="center">
          <span class="one">小丽啊</span><span>副主任医生</span>
          <p>北京市积水潭医院</p>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 列表页 -->
    <ul class="list">
      <li><van-icon name="award-o" />
        <div
        @click="fun1"
        >
          <span>我的认证</span>
          <van-icon name="arrow" />
        </div>
      </li>
      <li><van-icon name="after-sale" /><div
        @click="fun2"
      >我的收入<span><van-icon name="arrow" /></span></div></li>
      <li><van-icon name="peer-pay" /><div @click="fun3">我的银行卡<span><van-icon name="arrow" /></span></div></li>
      <li><van-icon name="more-o" /><div @click="fun4">患者评价<span><van-icon name="arrow" /></span></div></li>
      <li><van-icon name="underway-o" /><div @click="fun5">服务设置<span><van-icon name="arrow" /></span></div></li>
      <li><van-icon name="question-o" /><div @click="fun6">帮助中心<span><van-icon name="arrow" /></span></div></li>
    </ul>

  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);
Vue.use(Icon);
export default {
  methods:{
    fun1(){
      this.$router.push('/details/myhomes')
    },
    fun2(){
      this.$router.push('/details/myhome2')
    },
     fun3(){
      this.$router.push('/details/myhome3')
    },
    fun4(){
      this.$router.push('/details/myhome4')
    },
     fun5(){
      this.$router.push('/details/myhome5')
    },
    fun6(){
      this.$router.push('/details/myhome6')
    },
    ico(){
      this.$router.push({name:'iconame'})
    },
    sat(){
      this.$router.push({name:'satname'})
    },

  },
  components:{
   
  }

  
}
</script>

<style lang="scss" scoped>
  .box{
    background-color: rgb(2, 120, 255);
    height: 200px;
    .top{
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      color: white;
      font-size: 25px;
      .ear{
        padding-right: 15px;
      }
    }
    .bottom{
      padding: 30px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      font-size: 18px;
      img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      .center{
        padding-right: 70px;
        .one{
          font-size: 25px;
          padding-right: 8px;
        }
      }
    }
  }
  .list{
    li{
      height: 80px;
      padding: 10px 10px;
      font-size: 25px;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      div{
        border-bottom: 1px solid rgb(180, 170, 170);
        width: 100%;
        display: flex;
        padding-left: 10px;
        padding-bottom: 5px;
        // height: 50px;

        justify-content: space-between;
      }
    }
  }
</style>